<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont back-icon">&#xe60c;</span>
    </div>
    <div class="header-middle">
      <span class="iconfont search-icon">&#xe632;</span>
      <div class="kw">输入城市/景点/游玩主题</div>
      <input type="text" class="header-input" />
    </div>
    <router-link to="/city"><!--tag="li"-->
      <div class="header-right">
        <!-- {{ this.$store.state.city }} -->
                {{ city}}
            <!-- {{ namedCity}} -->
        <span class="iconfont">&#xe6aa;</span>
      </div>
    </router-link>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex' //mapState和mapGetters都是一个辅助函数

export default {
  name: "HomeHeader",
  // props: {//有了下面那个辅助函数，这里就不能再写了，得去掉，不然那会报错
  //   city: String
  // }
  //方法一,数组形式
  // computed: mapState([//计算属性进行映射，可以简化上面的{{ this.$store.state.city }}的写法
  //   'city'  //将mapState的属性和本组件里的属性进行一一对应的映射
  // ])
  //方法二，对象形式
  computed:{
    ...mapState({//计算属性进行映射，可以简化上面的{{ this.$store.state.city }}的写法
      city: 'city'
    }),

    ...mapGetters({
      namedCity: 'namedCity'
    })
  }

};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';

.header {
  display: flex;
  width: 100%;
  height: 0.88rem;
  background-color: $bgColor;
  color: #fff;
}

.header .header-left {
  width: 0.8rem;
  height: 100%;
  text-align: center;
  line-height: 0.88rem;
}

.header .header-left .back-icon {
  font-size: 20px;
}

.header .header-middle {
  position: relative;
  flex: 1;
  margin: 0.14rem 0;
}

.header .header-middle .search-icon {
  position: absolute;
  top: 0.13rem;
  left: 0.2rem;
  color: #e4e7ea;
}

.header .header-middle .header-input {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
}

.header .header-middle .kw {
  position: absolute;
  top: 0.16rem;
  left: 0.65rem;
  color: #e4e7ea;
}

.header .header-right {
  min-width :1.12rem;
  padding: 0 .1rem;
  // width: 1.32rem;
  height: 100%;
  text-align: center;
  line-height: 0.88rem;
  color: #fff;
}
</style>

